<template>
    <div>

        <!--model={this.state.el-form} rules={this.state.rules}-->
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>

        <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px"
                 :rules="rules" ref="ruleForm" status-icon>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="用户名" prop="username">
                        <!--onChange={this.onChange.bind(this, 'pass')} value={this.state.el-form.pass} autoComplete="off"-->
                        <el-input v-model="ruleForm.username" rules={this.rules} />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="密码" prop="password">
                        <!--onChange={this.onChange.bind(this, 'pass')} autoComplete="off"-->
                        <el-input type="password" v-model="ruleForm.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <div v-show="isRegistered">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="确认密码" prop="passwordConfirm">
                            <el-input type="password" v-model="ruleForm.passwordConfirm"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <!--onClick={this.handleSubmit.bind(this)}-->
                    <el-Button type="primary" @click="register">提交</el-Button>
                    <!--onClick={this.handleReset.bind(this)}-->
                    <el-Button @click="cancel">重置</el-Button>
                </el-form-item>
            </div>
            <el-form-item v-show="!isRegistered">
                <el-button type="primary" @click="login()">登陆</el-button>
                <el-button type="button" @click="toRegister">没账号?去注册</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.passwordConfirm !== '') {
                        this.$refs.ruleForm.validateField('passwordConfirm');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
            return {
                labelPosition: null,
                isRegistered: false,
                ruleForm:{
                    username: '',
                    password: '',
                    passwordConfirm: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, validator:validatePass ,message: '请输入密码', trigger: 'blur'}
                    ],
                    passwordConfirm:[
                        {required: true,validator: validatePass2, message: '两次密码不一致', trigger: 'blur'}
                    ]

                }
            }
        },
        methods: {
            login: function () {
                this.$refs.ruleForm.validateField('username');
                this.$refs.ruleForm.validateField('checkPass');
                if (
                    this.ruleForm.username === localStorage.getItem("username") &&
                    this.ruleForm.password === localStorage.getItem("password")) {
                    this.$router.push('home/list')
                } else {
                    alert("用户名密码失败,或不存在")
                }
            },
            toRegister: function () {
                this.$refs.ruleForm.resetFields(); //重置表单
                this.isRegistered = true; //注册
            },
            cancel: function () {
                this.ruleForm.username = '';
                this.ruleForm.password = '';
                this.ruleForm.passwordConfirm='';
                this.isRegistered = true;
                this.$refs.ruleForm.clearValidate();
            },
            register: function () {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        localStorage.setItem("username", this.ruleForm.username);
                        localStorage.setItem("password", this.ruleForm.password);
                        this.$refs.ruleForm.resetFields();
                        /* this.ruleForm.username = '';
                         this.ruleForm.password = '';
                         this.ruleForm.passwordConfirm='';
                         this.isRegistered = false;
                         this.$refs.ruleForm.clearValidate();*/
                        console.log(localStorage)
                        this.isRegistered = false;
                    }
                })
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();//如果只是清除表单验证用
                //  this.$refs[formName].clearValidate();
            }
        },

    }
</script>

<style scoped>

</style>